<template>
  <div class="Emergency">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>响应命令单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Emergency-center">
      <div class="Emergency-dt">
        <MapContent mapId="mldsy" />
      </div>
      <div class="Emergency-tb">
        <div class="Emergency-tb-bd">
          <el-form :inline="true" :model="formInline" size="small" label-width="80px">
            <el-form-item label="发布时间：" label-width="95px" :style="{ fontFamily: 'PingFang HK' }">
              <el-date-picker type="date" placeholder="选择日期" v-model="formInline.startTime" style="width: 30%;"
                value-format="yyyy-MM-dd" :picker-options="endPickerOptions" :clearable="false">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="至" label-width="30px" :style="{ fontFamily: 'PingFang HK' }" class="zhi">
              <el-date-picker type="date" placeholder="选择日期" v-model="formInline.endTime" style="width: 30%;"
                value-format="yyyy-MM-dd" :picker-options="startPickerOptions" :clearable="false">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="query">查询</el-button>
            </el-form-item>
            <!-- </div> -->
          </el-form>
        </div>
        <div class="Emergency-tb-bt">
          <div class="Emergency-tb-bt-titel">
            <div class="Emergency-tb-bt-top">省公司响应命令单</div>
            <div class="Emergency-tb-bt-bottom" @click="goList(1)">更多<i class="el-icon-d-arrow-right" color="#fff"></i>
            </div>
          </div>
          <div class="RightLine-t">
            <div id="RightPie" style="width:40%;height:85%;margin-right: 20px;"></div>
            <div class="legend_pie">
              <div v-for="(item, index) in legendsList" :key="index" style="margin-left:5px;">
                <span class="pie_bottom" :style="{ background: item.color }"></span>
                <span>{{ item.name }}</span>
              </div>

            </div>
            <div style="width:80%;">
              <BarChartsColor :option="option1" chartId="LeftLine1" barChartsId="LeftLine2" v-if="showBarCharts">
              </BarChartsColor>
            </div>
          </div>
        </div>
        <div class="Emergency-tb-zzt">
          <div class="Emergency-tb-bt-titel">
            <div class="Emergency-tb-bt-top">地市级单位响应命令单</div>
            <div class="Emergency-tb-bt-bottom" @click="goList(2)">更多<i class="el-icon-d-arrow-right" color="#fff"></i>
            </div>
          </div>
          <div class="bottomArea">
            <div v-if="showBarCharts" :style="{ width: containerWidth, height: '95%' }">
              <BarChartsColor :option="option" chartId="zzt1" barChartsId="zzt2" v-if="showBarCharts">
              </BarChartsColor>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Emergency-footer">
      <div class='Emergency-footer-top'>
        <div class="Emergency-footer-top-l">响应命令单</div>
        <div class="Emergency-footer-top-r" @click="goList(0)">更多<i class="el-icon-d-arrow-right" color="#fff"></i></div>
      </div>
      <div class='Emergency-footer-table'>
        <div class="ElTable">
          <el-table stripe
            :header-cell-style="{ background: '#265CFF', color: '#fff', 'text-align': 'center', fontWeight: 'bold', fontFamily: 'Microsoft YaHei UI', fontSize: '16' }"
            :data="tableDataList" :style="{ color: '#fff', fontSize: '16', fontFamily: 'Microsoft YaHei UI' }"
            height="193px" :default-sort="{ prop: 'approvalTime', order: 'descending' }" :cell-style="{ height: '44px' }">
            <el-table-column label="序号" type="index" align="center">
            </el-table-column>
            <el-table-column prop="responseName" label="响应命令单" width="420" height="50px">
            </el-table-column>
            <el-table-column prop="eventName" label="事件类别" align="center">
            </el-table-column>
            <el-table-column prop="responseLvName" label="响应级别" align="center">
            </el-table-column>
            <el-table-column prop="effectRange" label="影响范围" align="center">
            </el-table-column>
            <el-table-column prop="effectTime" label="影响时间" align="center" width="250px">
            </el-table-column>
            <el-table-column prop="linkman" label="联系人" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="createDeptName" label="发布单位" align="left" width="228px">
            </el-table-column>
            <el-table-column prop="zqxx" label="灾情信息" align="center">
              <!-- eslint-disable-next-line -->
              <template slot-scope="scope">
                <div>
                  <a href="javascript:;" @click="goDisasterList(scope.row.id)">查看</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="approvalTime" label="发布时间" align="center" sortable width="100px">
            </el-table-column>
            <el-table-column prop="responseState" label="状态" align="center" :formatter="stateFormatter">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MapContent from "../../SystemHomepage/HomePageContent/mapContent.vue";
// import Table from "../../../components/table.vue"
import "../../../assets/style/Emergency.less";
import { xymldSubmissionList, getLndexPieApi } from "@/api/EmergencyDisposal/xymld";
import { getAlreadyIssue } from "@/api/EarlyWarningManagement/yjyp.js";
import BarChartsColor from "../../EmergencyResources/components/BarChartsColor.vue";
export default {
  name: "Emergency",
  components: { MapContent, BarChartsColor },
  data() {
    return {
      formInline: {
        startTime: "",
        endTime: ""
      },
      mapData: [],
      value: "1",
      tableDataList: [],
      pie: null, // 饼图
      pie_total: null,
      city_xAxis_data: [],
      xAxis_data: [],
      showBarCharts: false,
      containerWidth: "100%",
      legendsList: [
        {
          color: "#fa585a",
          name: "Ⅰ级"
        },
        {
          color: "#F59066",
          name: "Ⅱ级"
        },
        {
          color: "#FDDD67",
          name: "Ⅲ级"
        },
        {
          color: "#148AF3",
          name: "Ⅳ级"
        }
      ],
      option: {
        barWidth: 30, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 8, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "78%",
        bdHeight: "12%",
        qyNum: 5,
        tooltipXandY: {
          ch1: 140,
          ch2: 50,
          ch3: 100,
          ch4: 100
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 30,
          bottom: 6,
          containLabel: true
        },
        legends: ["I级", "II级", "III级", "IV级"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "数量",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      option1: {
        barWidth: 36, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 8, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "90%",
        bdHeight: "10%",
        qyNum: 5,
        tooltipXandY: {
          ch1: 80,
          ch2: 100,
          ch3: 100,
          ch4: 24
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 36,
          bottom: 6,
          containLabel: true
        },
        legends: ["红色", "橙色", "黄色", "蓝色"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "数量",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      }
    };
  },
  computed: {
    startPickerOptions() {
      return {
        disabledDate: (time) => {
          return this.formInline.startTime && time.getTime() < new Date(this.formInline.startTime).getTime();
        }
      };
    },
    endPickerOptions() {
      return {
        disabledDate: (time) => {
          return this.formInline.endTime && time.getTime() > new Date(this.formInline.endTime).getTime();
        }
      };
    }
  },
  created() {
    // 当前日期
    const d = new Date();
    // 获取当前日期的前三个月的月份
    const pastMonth = d.getMonth() - 3;
    // 修改月份，如果前三个月对应没有该日期，则向后延顺
    d.setMonth(pastMonth);
    this.formInline.startTime = this.formatDate(d);
    this.formInline.endTime = this.formatDate(new Date());
  },
  mounted() {
    this.mapHanble(this.formInline);
    this.getLndexPie(this.formInline);
    this.publishedinfo();// 获取已发布命令单
  },
  methods: {
    async mapHanble() {
      const res = await getAlreadyIssue(this.formInline);
      this.mapData = res;
    },
    // 省级饼图
    shengPieChart() {
      this.$Highcharts.chart("RightPie", {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          },
          backgroundColor: "transparent",
          marginTop: -10
        },
        title: {
          text: ""
        },
        credits: {
          enabled: false
        },
        tooltip: {
          formatter() {
            return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
          },
          backgroundColor: "rgba(22,66,120)",
          style: {
            color: "#fff",
            fontSize: "14px"
          }
        },
        subtitle: {
          floating: true,
          text: `<span style="font-size:25px;font-weight:bold;color:#fff">${this.pie_total}</span><br/><span style="font-size:14px;color:#fff">总数</span>`,
          x: 0,
          y: 55
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: 40,
            dataLabels: {
              enabled: false,
              // format: '{point.name}<br/>{point.y}',
              distance: 0,
              formatter: function () {
                if (this.percentage > 0) { return `<span style="font-size:12px;font-weight:bold;color:${this.point.color}">${this.point.name}</span><br/><span style="font-size:12px;color:${this.point.color}">${this.point.y}</span>`; }
              },
              style: {
                color: "#Fff",
                fontSize: "14px"
              }
            }, states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        colors: [
          "#FA585A",
          "#F5885C",
          "#FEDF6E",
          "#258FE9"
        ],
        series: [{
          size: "90%",
          innerSize: "70%",
          type: "pie",
          data: [
            [this.data[0].name, this.data[0].value === 0 ? null : this.data[0].value],
            [this.data[1].name, this.data[1].value === 0 ? null : this.data[1].value],
            [this.data[2].name, this.data[2].value === 0 ? null : this.data[2].value],
            [this.data[3].name, this.data[3].value === 0 ? null : this.data[3].value]
          ]
        }]
      });
    },
    goList(shengjiType) {
      this.$router.push({
        name: "EmergencyResponselist",
        query: {
          // shengjiType
        }
      });
    },
    goDisasterList(id) {
      this.$router.push({
        name: "DisasterInformationStatistics",
        query: {
          id
        }
      });
    },
    publishedinfo() {
      xymldSubmissionList({ responseState: 2 }).then(res => {
        this.tableDataList = res.data;
      });
    },
    stateFormatter(row, column, cellValue, index) {
      if (cellValue === "0") {
        return "编辑中";
      } else if (cellValue === "1") {
        return "待审批";
      } else if (cellValue === "2") {
        return "已发布";
      }
    },
    // 首页查询按钮
    query() {
      this.showBarCharts = false;
      this.mapHanble(this.formInline);
      this.getLndexPie(this.formInline);
    },
    async getLndexPie(params) {

      try {
        const res = await getLndexPieApi(params);
        const { pie, columnar, cityColumnar } = res;
        console.log("xx", res);
        const data = [
          { value: 0, name: "I级", order: 1 },
          { value: 0, name: "II级", order: 2 },
          { value: 0, name: "III级", order: 3 },
          { value: 0, name: "IV级", order: 4 }
        ];
        let pie_total = 0;
        if (pie.length) {
          data.forEach(item => {
            pie.forEach(pieitem => {
              if (item.order == pieitem.order) {
                item.value = pieitem.rlnCount;
                item.name = pieitem.rln;
              }
            });
          });
          pie_total = pie.reduce((total, currentValue, currentIndex, arr) => {
            return total + currentValue.rlnCount;
          }, 0);
        }
        this.pie_total = pie_total;
        this.data = data;
        this.shengPieChart();
        if (columnar.length) {
          if (columnar.length > 5) this.containerWidth = 86 * columnar.length + "px";
          this.option1.xAxis[0].data = [];
          this.option1.series = [];

          columnar.forEach(item => {
            this.option1.xAxis[0].data.push(item.eventName);
            this.option1.series.push([item.oneCount, item.twoCount, item.threeCount, item.fourCount]);
          });
        } else {
          this.option1.series = [];
          this.containerWidth = "100%";
        }

        if (cityColumnar.length) {
          this.option.series = [];
          this.option.xAxis[0].data = [];
          cityColumnar.forEach(item => {
            this.option.xAxis[0].data.push(item.city);
            this.option.series.push([item.oneCount, item.twoCount, item.threeCount, item.fourCount]);
          });
          if (cityColumnar.length > 10) this.containerWidth = 86 * cityColumnar.length + "px";
        } else {
          this.containerWidth = "100%";
        }
        this.$nextTick(() => {
          this.showBarCharts = true;
        });
      } catch (error) {
        console.log(error);
      }
    },
    formatDate(val) {
      const date = new Date(val);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    }
  }
};
</script>

<style scoped lang="less">
:deep(div::-webkit-scrollbar-track) {
  border-radius: 0;
  background: transparent;
  border: none;
}

:deep(.el-icon-date) {
  display: none;
}

:deep(.el-input--prefix .el-input__inner) {
  padding-left: 10px;
}

.Emergency {
  height: 95%;
  // display: flex;
  // flex-direction: column;
  // justify-content: space-between;
  padding: 0px 20px;
  margin: 0;

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  .Emergency-center {
    width: 100%;
    height: 69%;
    margin-top: 10px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;

    .Emergency-dt {
      width: 55%;
      height: 100%;
      border: #22588f 1px solid;
      border-radius: 4px;
      padding: 8px;
      box-sizing: border-box;
    }

    .Emergency-tb {
      width: 44%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .Emergency-tb-bd {
        width: 100%;
        height: 10%;
        border: #22588f 1px solid;
        border-radius: 4px;

        :deep(.zhi) {
          margin-right: 5px;

          .el-form-item__label {
            margin-right: 10px !important;
            margin-left: 10px !important;
          }
        }

        :deep(.el-form-item__content) {
          .el-date-editor.el-input {
            width: 275px !important;
          }
        }

        .flexBetweens {
          align-items: center;
          justify-content: space-around;
        }

        :deep(.el-form) {
          margin-top: 10px;
        }

        :deep(.el-form-item__label) {
          font-family: PingFang SC;
          font-weight: 400;
          font-style: normal;
          color: #eeeeee;
        }

        :deep(.el-input__inner) {
          background-color: transparent;
          border: #22588f 1px solid;
          color: #fff;
        }

        :deep(.el-form-item__label) {
          //margin-right: 18px;
          margin: 0;
        }
      }

      .Emergency-tb-bt {
        width: 100%;
        height: 39%;
        border: #22588f 1px solid;
        border-radius: 4px;
        margin-top: 8px;
        display: flex;
        flex-direction: column;

        .RightLine-t {
          width: 100%;
          flex: 1;
          display: flex;
          position: relative;

          .legend_pie {
            position: absolute;
            left: 4%;
            bottom: 11%;
            display: flex;
            font-size: 14px;

            // align-items: center;
            // transform: translateX(-50%);
            div {
              color: #fff;
            }
          }

          .pie_bottom {
            display: inline-block;
            text-align: center;
            height: 13px;
            width: 18px;
            line-height: 10px;
            border-radius: 3px;
          }
        }

        :deep(.el-input__inner) {
          height: 23px;
          line-height: 23px;
          border: #22588f 1px solid;
          border-radius: 2px;
          color: #eeeeee;
          background-color: rgba(34, 88, 143, 1);
        }
      }

      .Emergency-tb-bt-titel {
        background-color: #265cff;
        height: 35px;
        font-size: 18px;

        .Emergency-tb-bt-top {
          font-size: 18px;
        }

        .Emergency-tb-bt-bottom {
          color: #fff;
          font-size: 18px;
        }
      }

      .Emergency-tb-zzt {
        width: 100%;
        height: 49%;
        display: flex;
        flex-direction: column;
        border: #22588f 1px solid;
        border-radius: 4px;
        margin-top: 8px;
      }
    }
  }

  .Emergency-footer {
    width: 100%;
    // height: 30%;
    border: #22588f 1px solid;
    border-radius: 4px;
    margin-top: 6px;
    box-sizing: border-box;

    .Emergency-footer-top {
      height: 35px;
      display: flex;
      justify-content: space-between;
    }

    .Emergency-footer-top-l {
      color: #d5f0ff;
      margin: auto 15px;
      font-size: 18px;
      font-family: "Microsoft YaHei UI";
      font-weight: bold;
    }

    .Emergency-footer-top-r {
      color: #fff;
      margin: auto 15px;
      font-size: 18px;
      font-family: "Microsoft YaHei UI";
      cursor: pointer;
    }

    .Emergency-footer-table {
      // width: 100%;
      height: 95%;
      margin: 0 15px;
    }

    .ElTable /deep/ .el-table,
    .el-table__expanded-cell {
      background-color: transparent;
    }

    :deep(.has-gutter th:last-child) {
      background-color: transparent;
    }

    .ElTable /deep/ .el-table tr {
      background-color: transparent !important;
    }

    .ElTable /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
      background: rgba(104, 168, 244, 0.3);
    }

    .ElTable /deep/ .el-table td {
      border-bottom: 0px solid #dfe6ec !important;
    }

    .ElTable /deep/ .el-table th {
      border-bottom: 0px solid #dfe6ec !important;
    }

    .ElTable /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
      background-color: transparent;
    }

    :deep(.el-table .el-table__body .el-table__cell) {
      padding: 3px 0;
    }

    a:link {
      color: #fff;
    }

    .el-table::before {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }

    :deep(.el-table .caret-wrapper) {
      display: none;
    }
  }
}

.bottomArea {
  margin-top: 8px;
  height: 100%;
  overflow-x: auto;
  width: 100%;

}

.bottomArea::-webkit-scrollbar {
  height: 8px;
}

:deep(.leftTopBtn) {
  height: 0px !important;
}
</style>
